import React, { forwardRef, useState } from 'react'
import { Form,Input,message, Button, Upload ,Image } from 'antd'
import { UploadOutlined } from '@ant-design/icons'

const {TextArea} = Input
const QuestionForm=forwardRef((props,ref)=> {

    const [img, setImg] = useState('')
    const [img2, setImg2] = useState('')
    const props1 = {
        name: 'file',
        action: '/api/question/upload_img',
        headers: {
        authorization: 'authorization-text',
        },
        onChange(info) {
        if (info.file.status !== 'uploading') {
            console.log(info.file, info.fileList);
            setImg(info.file.response.result.topic_img)
            console.log(img)
        }
        if (info.file.status === 'done') {
            message.success(`${info.file.name} file uploaded successfully`);
        } else if (info.file.status === 'error') {
            message.error(`${info.file.name} file upload failed.`);
        }
        },
    }
    const props2 = {
        name: 'file',
        action: '/api/question/upload_img',
        headers: {
        authorization: 'authorization-text',
        },
        onChange(info) {
        if (info.file.status !== 'uploading') {
            console.log(info.file, info.fileList);
            setImg2(info.file.response.result.topic_img)
            console.log(img2)
        }
        if (info.file.status === 'done') {
            message.success(`${info.file.name} file uploaded successfully`);
        } else if (info.file.status === 'error') {
            message.error(`${info.file.name} file upload failed.`);
        }
        },
    }
    return (
        <div>
            <div style={{height:'150px',borderBottom:'20px'}}>
                点击上传题干图片：
                <Upload {...props1}>
                    <Button icon={<UploadOutlined />}>Click to Upload</Button>    
                </Upload>
                <p>{img}</p>
                <Image style={{width:'50px',height:'50px'}} src={img} />
            </div>
            <div style={{height:'150px',borderBottom:'20px'}}>
                点击上传解析图片：
                <Upload {...props2}>
                    <Button icon={<UploadOutlined />}>Click to Upload</Button>
                </Upload>
                <p>{img2}</p>
                <Image style={{width:'50px',height:'50px'}} src={img2} />
            </div>
            <Form
                ref={ref}
                // layout="vertical"
            >
                <Form.Item
                    label="题目类型"
                    name="question_type"
                    rules={[{ required: true, message: '请选择题目类型' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="题目题干"
                    name="question_title"
                    rules={[{ required: true, message: '请插入题干图片' }]}
                >
                    <Input />
                </Form.Item>
                
                <Form.Item
                    label="答案选项A "
                    name="answer_a"
                    rules={[{ required: true, message: '请输入答案A' }]}
                >
                    <Input />
                </Form.Item>
                
                <Form.Item
                    label="答案选项B "
                    name="answer_b"
                    rules={[{ required: true, message: '请输入答案B' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="答案选项C "
                    name="answer_c"
                    rules={[{ required: true, message: '请输入答案C' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="答案选项D "
                    name="answer_d"
                    rules={[{ required: true, message: '请输入答案D' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="正确答案"
                    name="true_answer"
                    rules={[{ required: true, message: '请输入正确答案' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="答案解析"
                    name="answer_key"
                    rules={[{ required: true, message: '请输入答案解析' }]}
                >
                    <Input />
                </Form.Item>
                
          </Form>
        </div>
    )
})
export default QuestionForm